<template>
  <div class="container">
    <div class="logo" @dblclick="toggleBindQrCode"></div>
    <div class="header">
      <div class="time-container">
        <div class="date">
          <p>{{ model.timer.weekDay }}</p>
          <p>{{ model.timer.date }}</p>
        </div>
        <div class="timer">
          {{ model.timer.time }}
        </div>
      </div>

      <div class="weather-container" v-if="model.weather.temperature">
        <img :src="`http://47.101.43.115${model.weather.image}`" />
        <div class="info">
          <p>{{ model.weather.info }}</p>
          <p>{{ model.weather.direct }}{{ model.weather.power }}</p>
        </div>
        <div class="temperature">{{ model.weather.temperature }}°</div>
      </div>
    </div>
    <qrcode-vue
      :value="`https://zhjc.jstzsb.cn/tejcapp/deviceDetail.html?code=${model.info.tag96333}&cityId=9003213000000100&devKindCode=3000`"
      :size="77"
      style="position: absolute; bottom: 54px; left: 124px"
    ></qrcode-vue>

    <div class="bind-qrcode" v-if="showBindQrcode">
      <qrcode-vue
        :value="`https://zhjc.jstzsb.cn/tejcapp/liftCycleBind.html?sinNumber=${route.params.snNo}&cityId=9003213000000100`"
        :size="100"
      ></qrcode-vue>
      <p>扫码绑定设备</p>
    </div>

    <span class="tel"> 96333 </span>
    <span class="tag96333">
      {{ model.info.tag96333 }}
    </span>
    <span class="equipmentNumber">
      {{ model.liftInsureInfo.equipmentNo }}
    </span>
    <span class="insureDate">
      {{ model.liftInsureInfo.insureDateStart }} 至
      {{ model.liftInsureInfo.insureDateEnd }}
    </span>
    <span class="insureTel">
      {{ model.liftInsureInfo.tel }}
    </span>
    <span class="insureComName">
      {{ model.liftInsureInfo.insureComName }}
    </span>

    <span class="devKindCode"> 电梯 </span>

    <span class="categoryCode" v-if="model.info.categoryCode == 3100">
      曳引与强制驱动电梯
    </span>
    <span class="categoryCode" v-if="model.info.categoryCode == 3200">
      液压驱动电梯
    </span>
    <span class="categoryCode" v-if="model.info.categoryCode == 3300">
      自动扶梯与自动人行道
    </span>
    <span class="categoryCode" v-if="model.info.categoryCode == 3400">
      其它类型电梯
    </span>

    <span class="userComName">
      {{ model.info.userComName }}
    </span>
    <span class="useInnerNo">
      {{ model.info.useInnerNo }}
    </span>
    <span class="newRegNo">
      {{ model.info.newRegNo }}
    </span>
    <span class="licComName">
      {{ model.info.licComName }}
    </span>
    <span class="starLevel">
      {{ model.info.starLevel }}
    </span>
    <span class="maintainOrgName">
      {{ model.info.maintainOrgName }}
    </span>
    <span class="verifyComName">
      {{ model.info.verifyComName }}
    </span>
    <span class="verifyDateNext">
      {{ model.info.verifyDateNext }}
    </span>

    <span class="maintainOrgName">
      {{ model.info.maintainOrgName }}
    </span>
    <span class="verifyDateNext">
      {{ model.info.verifyDateNext }}
    </span>
    <span class="maintainEmergencyTel">
      {{ model.info.maintainEmergencyTel }}
    </span>
    <span class="starLevel">
      {{ model.info.starLevel }}
    </span>
    <span class="useCertNo">
      {{ model.info.useCertNo }}
    </span>

    <qrcode-vue
      :value="model.info.qrText"
      :size="52"
      style="position: absolute; bottom: 152px; right: 214px"
    ></qrcode-vue>

    <span class="date"> 2025 </span>

    <div class="maintainRecords">
      <div class="record" v-for="record in model.maintainRecord">
        <span class="day">{{ dayjs(record.startDate).format("D") }}</span>
        <span class="month">{{ dayjs(record.startDate).format("M") }}</span>
        <img
          :src="`http://47.101.43.115/api/Lift/ZbImg?imageName=${record.confirmFile}`"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import QrcodeVue from "qrcode.vue";
import api from "./../api";
import { useRoute } from "vue-router";
import dayjs from "dayjs";

const route = useRoute();
const weekDayMap = [
  "星期日",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
];

const model = reactive({
  info: {},
  liftInsureInfo: {},
  maintainRecord: [],
  timer: {
    weekDay: weekDayMap[dayjs().day()],
    date: dayjs().format("YYYY年M月D日"),
    time: dayjs().format("HH:mm"),
  },
  weather: {},
});

const showBindQrcode = ref(false);

const liftInfo = async (snNo: string) => {
  let response = await api.liftData(snNo);
  let data = response?.data?.data;
  if (data) {
    model.info = data?.info;
    model.liftInsureInfo = data?.liftInsureInfo;
    model.maintainRecord = data?.maintainRecord;
  }
};

const weatherInfo = async () => {
  let response = await api.weatherInfo();
  if (response.status == 200 && response.data.code == 200) {
    model.weather = response.data.data;
  }
};

const refreshTime = () => {
  model.timer = {
    weekDay: weekDayMap[dayjs().day()],
    date: dayjs().format("YYYY年M月D日"),
    time: dayjs().format("HH:mm"),
  };
};

const toggleBindQrCode = () => {
  showBindQrcode.value = !showBindQrcode.value;
};

liftInfo(route.params.snNo.toString());
weatherInfo();

setInterval(() => {
  liftInfo(route.params.snNo.toString());
  weatherInfo();
}, 60000);

setInterval(() => {
  refreshTime();
}, 1000);
</script>

<style lang="css" scoped>
.container {
  width: 1080px;
  height: 492px;
  background-image: url(./../assets/lift-bg2.png);
  background-size: 1080px 492px;
  background-repeat: no-repeat;
  position: relative;
  color: #333;
}

.bind-qrcode {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  z-index: 99;
}

.logo {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  width: 200px;
  font-size: 12px;
  padding: 0 32px;
}
.header {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  height: 44px;
  align-items: center;
  font-size: 12px;
  padding: 0 32px;
}

.header .time-container {
  display: flex;
  align-items: center;
}

.header .time-container .date {
  text-align: right;
}

.header .time-container .timer {
  font-size: 2.5em;
  font-weight: bold;
  margin-left: 0.5vw;
}

.header .weather-container {
  display: flex;
  align-items: center;
  padding: 0 2vw;
}

.header .weather-container > img {
  width: 36px;
  margin-right: 8px;
}

.header .weather-container .temperature {
  font-size: 2.5em;
  font-weight: bold;
  margin-left: 0.5vw;
}

.container span {
  position: absolute;
  font-size: 12px;
  font-weight: 500;
}
.container > span.tel {
  color: #f09900;
  font-size: 48px;
  font-weight: bold;
  top: 180px;
  left: 120px;
}
.container > span.tag96333 {
  color: #f09900;
  font-size: 48px;
  font-weight: bold;
  top: 261px;
  left: 120px;
}
span.insureDate {
  font-weight: 500;
  color: #0077c4;
  top: 206px;
  left: 880px;
  width: 190px;
  font-size: 14px;
  display: inline-block;
  text-align: center;
}
span.insureTel {
  font-weight: 500;
  color: #0077c4;
  top: 255px;
  left: 880px;
  width: 190px;
  font-size: 16px;
  display: inline-block;
  text-align: center;
}

span.equipmentNumber {
  font-weight: 500;
  color: #0077c4;
  top: 100px;
  left: 880px;
  width: 190px;
  font-size: 16px;
  display: inline-block;
  text-align: center;
}

span.insureComName {
  font-weight: 500;
  color: #0077c4;
  top: 286px;
  left: 880px;
  width: 190px;
  font-size: 14px;
  display: inline-block;
  text-align: left;
  line-height: 1.2;
  padding: 0 11px;
}

.devKindCode {
  top: 104px;
  left: 420px;
}
.categoryCode {
  top: 104px;
  left: 680px;
}

.userComName {
  top: 131px;
  left: 420px;
}

.useInnerNo {
  top: 159px;
  left: 420px;
}

.newRegNo {
  top: 159px;
  left: 680px;
}

.licComName {
  top: 187px;
  left: 420px;
}

.verifyComName {
  top: 209px;
  left: 420px;
  width: 180px;
  line-height: 1;
}
.verifyDateNext {
  top: 218px;
  left: 680px;
}
.useCertNo {
  top: 246px;
  left: 420px;
}
.maintainEmergencyTel {
  top: 246px;
  left: 680px;
}
.maintainOrgName {
  top: 276px;
  left: 420px;
}
.starLevel {
  top: 276px;
  left: 680px;
}

.container > span.date {
  color: #0077c4;
  font-size: 20px;
  top: 351px;
  left: 600px;
  font-weight: 700;
}

.maintainRecords {
  position: absolute;
  left: 448px;
  width: 618px;
  top: 384px;
  display: flex;
  flex-wrap: wrap;
}

.maintainRecords .record {
  width: 51px;
  position: relative;
  height: 44px;
  margin-bottom: 8px;
}
.maintainRecords .record > .day {
  position: absolute;
  top: 2px;
  font-size: 11px;
  right: 13px;
}
.maintainRecords .record > .month {
  position: absolute;
  top: 2px;
  font-size: 11px;
  right: 33px;
}
.maintainRecords .record > img {
  width: 80%;
  margin: 0 auto;
  position: absolute;
  top: 18px;
  left: 10%;
}
</style>
